<template>
    <div class="forgetPasswordView">
        <div class="container">
            <div class="title">找回密码</div>
            <div class="formBox">
                <form>
                    <div class="inputBox">
                        <span>邮箱：</span>
                        <input type="email" v-model="form.email" placeholder="请输入注册邮箱" />
                    </div>
                    <div class="message" v-if="form.message">{{ form.message }}</div>
                    <div class="inputBox">
                        <div class="btn" @click="resetPassword">发送重置邮件</div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';

const form = reactive({
    email: '',
    message: ''
});

const resetPassword = async () => {
    if (!form.email) {
        form.message = '请输入邮箱';
        return;
    }

    try {
        const response = await fetch('/api/user/to_reset_password', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                email: form.email
            })
        });

        const data = await response.json();
        if (data.code === 200) {
            ElMessage.success('重置密码邮件已发送，请查收');
        } else {
            form.message = data.msg || '发送失败';
        }
    } catch (error) {
        console.error('Reset password error:', error);
        form.message = '发送失败，请稍后重试';
    }
};
</script>

<style scoped>

</style>